<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软帝电影</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
    <!-- 头部部分 -->
    <div class="header">
        <a href="#" class="wuhan">武汉</a>
        <h3>软帝电影</h3>
        <a href="https://v.qq.com/" class="search"></a>
    </div>
    <!-- 导播图部分 -->
    <div class="daobotu">
        <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/figure1.jfif" alt=""></div>
      <div class="swiper-slide"><img src="images/figure2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/figure3.jfif" alt=""></div>
      <div class="swiper-slide"><img src="images/figure1.jpg" alt=""></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
    </div>
    <!-- 内容部分1 -->
    <div class="main1">
      <!-- 左侧图片1 -->
      <div class="left-photo1">
          <a href="introduce.html">
              <img src="images/photo1.jpg" alt="">
          </a>
      </div>
      <div class="zhongjian1">
        <!-- 标题1 -->
      <div class="biaoti1">
        <h3>唐人街探案3</h3>
    </div>
    <!-- 解释说明1 -->
    <div class="explore1">
        <div class="leibie1">喜剧 悬疑</div>
        <div class="difang1">中国大陆/136分钟</div>
        <div class="sj1">2021.02.12 08:00中国大陆上映</div>
    </div>
      </div>
     <div class="right1">
        <!-- 右侧上方评分1 -->
      <div class="dianping1">8.8</div>
      <!-- 右侧下方购票 -->
      <div class="goupiao1">购票</div>
  </div>
     </div>
      <!-- 内容部分2 -->
    <div class="main2">
      <!-- 左侧图片2 -->
      <div class="left-photo2">
          <a href="introduce.html">
              <img src="images/photo2.jpg" alt="">
          </a>
      </div>
      <div class="zhongjian2">
        <!-- 标题2 -->
      <div class="biaoti2">
        <h3>唐人街探案3</h3>
    </div>
    <!-- 解释说明2 -->
    <div class="explore2">
        <div class="leibie2">喜剧 悬疑</div>
        <div class="difang2">中国大陆/136分钟</div>
        <div class="sj2">2021.02.12 08:00中国大陆上映</div>
    </div>
      </div>
     <div class="right2">
        <!-- 右侧上方评分2 -->
      <div class="dianping2">8.8</div>
      <!-- 右侧下方购票 -->
      <div class="goupiao2">购票</div>
  </div>
     </div>
      <!-- 内容部分3 -->
    <div class="main3">
      <!-- 左侧图片3 -->
      <div class="left-photo3">
          <a href="introduce.html">
              <img src="images/photo3.jpg" alt="">
          </a>
      </div>
      <div class="zhongjian3">
        <!-- 标题3 -->
      <div class="biaoti3">
        <h3>唐人街探案3</h3>
    </div>
    <!-- 解释说明3 -->
    <div class="explore3">
        <div class="leibie3">喜剧 悬疑</div>
        <div class="difang3">中国大陆/136分钟</div>
        <div class="sj3">2021.02.12 08:00中国大陆上映</div>
    </div>
      </div>
     <div class="right3">
        <!-- 右侧上方评分3 -->
      <div class="dianping3">8.8</div>
      <!-- 右侧下方购票 -->
      <div class="goupiao3">购票</div>
  </div>
     </div>
     <!-- 底部导航栏 -->
    <div class="foot-nav">
      <ul>
          <li>
              <div class="tubiao1">
                  <img src="images/tubiao.PNG" alt="">
                  <div class="wenzi">推荐</div>
              </div>
          </li>
          <li>
              <div class="tubiao1">
                  <img src="images/tubiao.PNG" alt="">
                  <div class="wenzi">分类</div>
              </div>
          </li>
          <li>
              <div class="tubiao1">
                  <img src="images/tubiao.PNG" alt="">
                  <div class="wenzi">排行</div>
              </div>
          </li>
          <li>
              <div class="tubiao1">
                  <img src="images/tubiao.PNG" alt="">
                  <div class="wenzi">我的</div>
              </div>
          </li>
      </ul>
  </div>
    <script src="js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
      });
    </script>
</body>
</html>